⚡ 30 秒速记

• 核心判断：性能优化先建立用户指标与资源、主线程、渲染和网络证据，再定位最长关键路径
• 原理主线：围绕 「善用 shouldComponentUp」、「进阶玩法：PureComponent +」、「函数组件的性能优化：React.memo」 建立输入、状态变化与输出之间的因果关系
• 文章范围：系统讲解了 React 性能优化的核心原理与实践方法，包括 shouldComponentUpdate、PureComponent、React.memo、useMemo 等技术，帮助开发者有效减少不必要的渲染，提升大型 React 应用的性
• 边界与代价：实验室分数不等于真实用户体验，平均值也会掩盖长尾；优化一项指标可能转移成本
• 工程落地：用现场数据确定瓶颈、做最小改动、对照验证并持续监控回归

React 性能优化的关键，是避免没有数据变化却仍然发生的重复渲染或重复计算。 类组件可用 shouldComponentUpdate 精确判断，也可用 PureComponent 对 props 和 state 做浅比较；函数组件则常用 React.memo 控制组件重渲染，用 useMemo 缓存局部计算。浅比较依赖引用稳定，内容未变但引用变了会多渲染，内容变了但引用没变又可能漏渲染。Immutable.js 能把内容变化和新引用关联起来，但存在学习成本，不一定适合所有团队。

这篇文章不要按 API 清单来背。先用上面的 Mind Map 建立全局结构，再通过交互 DEMO 观察正常路径和边界路径如何改变状态；阅读正文时重点核对每一步的输入、负责执行的参与者、产生的中间状态以及最终可观察结果。遇到版本敏感结论，要把“历史实现”“当前行为”和“工程兼容策略”分开说明；遇到性能或架构取舍，则用实际指标、失败现象和验证手段支撑判断。

版本校准： 本文若分析 ReactDOM.render、旧生命周期或栈调和，应把它视为理解架构演进的历史路径。React 19 已移除 ReactDOM.render，当前客户端入口使用 createRoot；并发渲染也必须区分可中断的渲染阶段与同步提交阶段。迁移前对照 React 19 官方升级指南。

• 使用 shouldComponentUpdate 规避冗余的更新逻辑
• PureComponent + Immutable.js
• React.memo 与 useMemo

注：这 3 个思路同时也是 React 面试中“性能优化”这一环的核心所在

善用 shouldComponentUpdate

shouldComponentUpdate 的调用形式如下：

shouldComponentUpdate(nextProps, nextState)

• render 方法由于伴随着对虚拟 DOM 的构建和对比，过程可以说相当耗时。而在 React 当中，很多时候我们会不经意间就频繁地调用了 render。为了避免不必要的 render 操作带来的性能开销，React 提供了 shouldComponentUpdate 这个口子。React 组件会根据 shouldComponentUpdate 的返回值，来决定是否执行该方法之后的生命周期，进而决定是否对组件进行 re-render（重渲染）。
• shouldComponentUpdate 的默认值为 true，也就是说 “无条件 re-render”。在实际的开发中，我们往往通过手动往 shouldComponentUpdate 中填充判定逻辑，来实现“有条件的 re-render”。